import { JJMark } from "./cases/jiangjing";
import { MZMark } from "./cases/mizhou";
import { QJMark } from "./cases/qianjiang";
import Link from "next/link";
import Image from "next/image";
import BannerImg from '@/app/assets/images/customerCase/banner.jpg'
import JJImg from '@/app/assets/images/customerCase/jiangjin.jpg';
import MZImg from '@/app/assets/images/customerCase/mizhou.png';
import QJImg from '@/app/assets/images/customerCase/qianjiang.jpg';
import FoodImg from '@/app/assets/images/customerCase/foods.jpg';
import ZJImg from '@/app/assets/images/customerCase/zhijian.jpg';
import HBImg from '@/app/assets/images/customerCase/huanbao.jpg';
import LSImg from '@/app/assets/images/customerCase/liangshi.jpg';

interface CasesProps {
  src: any,
  title: string,
  path: string,
  code: string
}

const cases:CasesProps[] = [
  {
    src: JJImg,
    title: '重庆市江津区生态环境监测站',
    path: '/pages/customerCase/jiangjin',
    code: 'jiangjin'
  },
  {
    src: MZImg,
    title: '首厚LIMS在米舟联发检测正式上线啦！',
    path: '/pages/customerCase/mizhou',
    code: 'mizhou'
  },
  {
    src: QJImg,
    title: '重庆市黔江区疾病预防控制中心',
    path: '/pages/customerCase/qianjiang',
    code: 'qianjiang'
  },
  {
    src: FoodImg,
    title: '食品药品检验检测研究院',
    path: '/pages/customerCase/foods',
    code: 'foods'
  },
  {
    src: ZJImg,
    title: '质检中心',
    path: '/pages/customerCase/zhijiang',
    code: 'zhijiang'
  },
  {
    src: HBImg,
    title: '环保监测站',
    path: '/pages/customerCase/huanbao',
    code: 'huanbao'
  },
  {
    src: LSImg,
    title: '粮油质量检测站',
    path: '/pages/customerCase/liangyou',
    code: 'liangyou'
  },
]

interface InfoProps {
  params: { code: string }
}

async function getCaseInfo(code: string) {
  switch(code) {
    case 'jiangjin':
      return JJMark
    case 'mizhou':
      return MZMark
    case 'qianjiang':
      return QJMark
    case 'foods':
      return '<h4 class="field-title">食品药品检验检测研究院</h4>'
    case 'zhijiang':
      return '<h4 class="field-title">质检中心</h4>'
    case 'huanbao':
      return '<h4 class="field-title">环保监测站</h4>'
    case 'liangyou':
      return '<h4 class="field-title">粮油质量检测站</h4>'
    default:
      return '<div>暂无数据</div>'
  }
}

export default async function Info({
  params
}: InfoProps) {
  
  const caseElm = await getCaseInfo(params.code);
  const otherCases = getOtherCases();
  const targetCase = getTargetCase();

  function getTargetCase() {
    return cases.find(item => item.code === params.code);
  }
  
  function getOtherCases() {
    return cases.filter(item => item.code !== params.code)
  }

  function renderCase(item: CasesProps, index: number) {
    return <Link className="text-sm block pt-1 pb-1 text-gray-400 hover:text-red-400" 
    key={index} href={item.path}>{item.title}</Link>
  }
  
  return (
    <main>
      <div 
      className="bg-conver bg-center bg-no-repeat h-[336px] w-full"
      style={{backgroundImage: `url(${BannerImg.src})`}}>

      </div>
      <div className="w-full min-h-[400px] flex justify-center">
        <div className="max-w-screen-xl w-full">
          <div className="w-full h-[200px] flex flex-col items-center justify-center">
            <h4>案例</h4>
            <p>Case</p>
          </div>
          <div className='pt-10 pb-2 border-bottom border-gray-200'>
            <span>
              <i className='iconfont icon-daohangshouyexiantiao2 mr-1' /> 
              <Link className='text-gray-400 hover:text-red-400' href={'/pages/customerCase'} >客户案例</Link>
              <span className='text-gray-400 mr-2 ml-2'>/</span>
              <span className='text-gray-400'>{targetCase?.title || ''}</span>
            </span>
          </div>
          <div className="pt-4 pb-10">
            <div dangerouslySetInnerHTML={{__html: caseElm}}></div>
            <div className='flex justify-center items-center pt-10 flex-col'>
              <Image src={targetCase?.src} alt={targetCase?.title || ''} style={{width: '400px'}} />
              <p>{targetCase?.title || ''}</p>
            </div>
          </div>
          <div className="pt-10 pb-10">
            <h4 className="field-title">相关信息</h4>
            <div className="grid grid-cols-2 bg-gray-100 p-2">
              {
                otherCases.map((item, index) => renderCase(item, index))
              }
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}